<template>
  <div>
    <a-row>
      <h1 class="title cartoonFont">新歌发售</h1>
    </a-row>
    <a-row justify="space-between">
      <a-col
        v-for="item in FilterGetNewSongData"
        @click="onSongDetails"
        :span="4"
        :key="item.id"
        class="cartoontext"
      >
        <div class="newSongCol">
          <img :src="item.picUrl" alt="" />
          <p>{{ item.name }}</p>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "@vue/runtime-core";
import { message } from "ant-design-vue";
import { getNewSongStore, getLoginStore } from "../../store";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "app",
  setup() {
    // 调用容器装歌单数据
    const getNewSongDataSrore = getNewSongStore();
    const getNewSongData = ref();
    const FilterGetNewSongData = ref();
    // 获取cookie状态
    const isLoginStatus = ref(getLoginStore().cookie);
    // 定义路由
    const router = useRouter();
    // 点击卡片调用函数
    function onSongDetails() {
      if (!isLoginStatus.value) {
        message.error("请先登陆");
        // 跳转到登陆页面
        router.push("login");
      } else {
        // 跳转到歌单详情页
        router.push("songSheet");
      }
    }
    onMounted(async () => {
      getNewSongData.value = await getNewSongDataSrore.fetch("newsong");
      FilterGetNewSongData.value = getNewSongData.value.data.result.filter(
        (item: any, index: number) => {
          return index < 5;
        }
      );
      // console.log('============>', FilterGetNewSongData.value);
    });
    return {
      getNewSongData,
      FilterGetNewSongData,
      onSongDetails,
    };
  },
});
</script>

<style lang="less" scoped>
.newSongCol {
  text-align: center;
}
.newSongCol img {
  border: 3px solid black;
  border-radius: 8px;
  width: 290px;
}
.newSongCol img:hover {
  cursor: pointer;
  box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.2);
}
.newSongCol p:hover {
  cursor: pointer;
}
.title {
  margin-left: 1rem;
  font-size: 28px;
}
</style>
